<template>
  <div class="recordMain">
    <div class="chatVoice" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">
      <text>{{voiceTis}}</text>
    </div>

    <view class="record" v-if="recording">
      <view class="gif">
        <image src="https://oss.seenlove.com/images/e43bb8023c209f07210e68cde2c7882e.gif" class="recording" mode="aspectFit"></image>
      </view>
      <view class="recordTis"><text class="recordTis-text">{{recordTis}}</text></view>
    </view>
  </div>
</template>

<script setup lang="ts">
import H5Recorder from "@/utils/H5Recorder.js";
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
let props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);

// #ifdef H5
let recorder = new H5Recorder(); //H5实例
// #endif

// #ifndef H5
let Recorder = uni.getRecorderManager(); //APP实例
// #endif

let initPoint = {
  identifier: 0,
  Y: 0,
};
let recording = ref(false);
let recordTis = ref("手指上滑 取消发送");
let voiceTis = ref("按住 说话");
let recordContent = null;
let recordWillStop = false;
let canRecord = true;

onMounted(() => {
  //录音结束事件
  // #ifndef H5
  Recorder.onStop((res) => {
    recordContent = res.tempFilePath;
    canSend();
  });
  // #endif

  //this.hasAuthority()//获取权限
});

function canSend() {
  if (recordContent && !recordWillStop) {
    handleSave();
  }
}

function init() {
  recordContent = null;
  recordWillStop = false;
}

async function handleSave() {
  try {
    uni.showLoading({
      title: "上传中",
    });
    // let resp = await counter.uploadFile(recordContent);
    // let url = resp
    //   ? resp
    //   : "https://diditazi.oss-cn-shanghai.aliyuncs.com/image/b6fddc4014c269b15b6fcec64f4abd6e.aac";
    // if (resp) emit("update:modelValue", recordContent);
    emit("update:modelValue", recordContent);
  } catch (error) {
  } finally {
    init(); //初始化一下
    uni.hideLoading();
  }
}

async function voiceBegin(e) {
  // #ifdef H5
  let resp = await recorder.init();
  if (!resp) return;
  // #endif

  if (e.touches.length > 1) return;
  initPoint.Y = e.touches[0].pageY;
  initPoint.identifier = e.touches[0].identifier;
  recording.value = true;
  voiceTis.value = "松开 结束";

  // #ifdef H5
  recorder.startRecording();
  // #endif

  // #ifndef H5
  Recorder.start();
  // #endif
}

function voiceCancel() {
  recording.value = false;
  voiceTis.value = "按住 说话";
  recordTis.value = "手指上滑 取消发送";
  recordWillStop = true; //不发送录音
  voiceEnd();
}

async function voiceEnd() {
  if (!recording.value) return;
  recording.value = false;
  voiceTis.value = "按住 说话";
  recordTis.value = "手指上滑 取消发送";

  // #ifdef H5
  await recorder.stopRecording();
  setTimeout(() => {
    let resp = recorder.exportRecording();
    recordContent = URL.createObjectURL(resp);
    canSend();
  }, 1000);
  // #endif

  // #ifndef H5
  Recorder.stop();
  // #endif
}

async function voiceIng(e) {
  if (!recording.value) return;
  let touche = e.touches[0];
  if (initPoint.Y - touche.pageY >= uni.upx2px(100)) {
    recordWillStop = true;
    recordContent = null;
    recordTis.value = "松开手指 取消发送";
    //console.log("取消录音");
  } else {
    recordWillStop = false;
    recordTis.value = "手指上滑 取消发送";
    //console.log("继续录音");
  }
}
</script>



<style lang="scss" scoped>
.recordMain {
  width: 100%;
}
.chatVoice {
  background-color: #f7f7f7;
  border-radius: 50rpx;
  margin: 0 20rpx 0rpx 20rpx;
  flex: 1;
  padding: 14rpx 22rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  text {
    font-size: 32rpx;
    color: #282828;
  }
}

.chatVoice:active {
  background-color: #f1f1f1;
}
.record {
  position: fixed;
  bottom: 150px;
  width: 350rpx;
  left: 200rpx;
  height: 350rpx;
  background-color: #4c4c4c;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .gif {
    width: 100px;
    top: 50rpx;
    position: absolute;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .recording {
    width: 150rpx;
    height: 150rpx;
  }

  .recordTis {
    bottom: 50rpx;
    position: absolute;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .recordTis-text {
    color: white;
    font-size: 30rpx;
  }
}
</style>
